<template>
    <com-page ref="page" :showFloatingNav="false" loadingTop="100px" bgColor="linear-gradient(180deg, #e2ebf5 0%, #F2F2F2 20%, #F2F2F2 100%)">
		<com-navbar title="个人中心" :back="false" :bgColor="navbarBg" color="#000000" />
        <view class="user-card">
            <view class="user-avatar">
                <com-avatar :src="patient ? patient.avatar : ''" :radius="50" />
            </view>
            <view class="user-info">
                <view class="user-name">{{ patient ? patient.name : "未创建就诊人" }}</view>
                <view v-if="patient" class="user-phone">{{ patient.mobile }}</view>
            </view>
            <view class="user-setting" @click.stop="menuSelectFn({path: '/pages-system/setting/index'})">
                <com-image src="13a820b3a4b92853cd40ac8f25db22e8845da4af212c4b259892f80f97b83d1f.png" :width="50" :height="50" />
            </view>
        </view>
        <view class="patient-card">
            <view class="patient-number" v-if="patientList.length > 0">
				目前共有 <text>{{ patientList.length }}</text> 位就诊人
			</view>
			<view class="patient-number" v-else>您还没有创建就诊人</view>
            <com-button v-if="patientList.length > 0" type="secondary" btnText="就诊人管理" @click.stop="menuSelectFn({path: '/pages-personal/my-patient/index'})" />
			<com-button v-else type="secondary" btnText="去创建" @click.stop="menuSelectFn({path: '/pages-system/login/index'})" />
        </view>
		<com-panel title="我的健康" isCard>
		    <view style="padding: 15rpx;">
		        <com-menu :list="menu.health" mode="grid" showRadius :cols="4" @select="menuSelectFn" />
		    </view>
		</com-panel>
       <com-panel title="商城订单" isCard>
            <view style="padding: 15rpx;">
                <com-menu :list="menu.order" mode="grid" showRadius :cols="5" @select="menuSelectFn" />
            </view>
        </com-panel>
		<!-- <com-panel title="护理订单" isCard>
		    <view style="padding: 15rpx;">
		        <com-menu :list="menu.nursing" mode="grid" showRadius :cols="5" @select="menuSelectFn" />
		    </view>
		</com-panel> -->
        <com-menu :list="menu.list" mode="list" isCard showRadius @select="menuSelectFn" />
    </com-page>
</template>

<script lang="ts" setup>

	import {
    	ref,
		computed,
    	getCurrentInstance
    } from "vue";

	import {
		onShow,
		onPageScroll
	} from '@dcloudio/uni-app';

	import { getProductOrderCount } from "@/request/apis/mall.js";
	import { getNurseOrderCount } from "@/request/apis/mall.js";

	const { proxy }: any = getCurrentInstance();

    const page: any = ref(null);
	const navbarBg = ref("rgba(226, 235, 245, 0)");
	const patient = computed(() => proxy.store.patient.current);
	const patientList = computed(() => proxy.store.patient.list);

    const menu = ref({
        order: [
            {
                icon: "gy_icon_obligation",
				iconSize: 50,
                label: "待付款",
                path: "/pages-personal/my-order/list/mall?type=1",
                number: 0
            },
            {
                icon: "gy_icon_daifahuo",
				iconSize: 50,
                label: "待发货",
                path: "/pages-personal/my-order/list/mall?type=2",
                number: 0
            },
            {
                icon: "gy_icon_beReceived",
				iconSize: 50,
                label: "待收货",
                path: "/pages-personal/my-order/list/mall?type=3",
                number: 0
            },
            {
                icon: "gy_icon_waitEvaluate",
				iconSize: 50,
                label: "待评价",
                path: "/pages-personal/my-order/list/mall?type=4",
                number: 0
            },
			{
			    icon: "gy_icon_alllOrders",
				iconSize: 50,
			    label: "全部订单",
			    path: "/pages-personal/my-order/list/mall?type=0",
			    number: 0
			}
        ],
		nursing: [
		    {
		        icon: "gy_icon_daiqueren1",
				iconSize: 50,
		        label: "待审核",
		        path: "/pages-personal/my-order/list/nurse?type=1",
		        number: 0
		    },
		    {
		        icon: "gy_icon_jinhangzhong",
				iconSize: 50,
		        label: "进行中",
		        path: "/pages-personal/my-order/list/nurse?type=2",
		        number: 0
		    },
		    {
		        icon: "gy_icon_yiwancheng",
				iconSize: 50,
		        label: "已完成",
		        path: "/pages-personal/my-order/list/nurse?type=3",
		        number: 0
		    },
		    {
		        icon: "gy_icon_shouhou",
				iconSize: 50,
		        label: "未通过",
		        path: "/pages-personal/my-order/list/nurse?type=4",
		        number: 0
		    },
			{
			    icon: "gy_icon_alllOrders",
				iconSize: 50,
			    label: "全部订单",
			    path: "/pages-personal/my-order/list/nurse?type=0",
			    number: 0
			}
		],
        health: [
			{
				isValidate: 1,
			    icon: "06d82f4a8f83143c64c07f72c457d12a8b9a0183bbf85a483a05cb9a5284e392.png",
				iconSize: 60,
			    label: "我的预约",
				path: "/pages-appointment/appointment-my/index"
			},
            {
				isValidate: 1,
                icon: "f4cd5a08acd2effd7fbd965b0fa5f3f689874443ef2eb21a278190167a568d32.png",
				iconSize: 60,
                label: "我的医生",
				path: "/pages-personal/my-doctor/index"
            },
    //         {
				// isValidate: 1,
    //             icon: "d49a744bba119589ef25b1156aa5711b599c176b6ff3845f8213a6263d18d38d.png",
				// iconSize: 60,
    //             label: "我的病历",
    //             path: "/pages-personal/my-case/index"
    //         },
			{
				isValidate: 1,
				icon: "d49a744bba119589ef25b1156aa5711b599c176b6ff3845f8213a6263d18d38d.png",
				iconSize: 60,
				label: "我的随访",
				path: "/page-follow/follow/index"
			},
            {
				isValidate: 1,
                icon: "bb9273e9f9528c79c93c3e8c9ef58b975efe36b47a37401691fc9f6182c26ba3.png",
				iconSize: 60,
                label: "我的问诊",
                path: "/pages-personal/my-ask-diagnosis/index"
            },
            {
				isValidate: 1,
                icon: "143244a33fccb59f31f09b9f9ec233b3482d7d337f9b6d04281432c61ab24045.png",
				iconSize: 60,
                label: "我的处方",
                path: "/pages-personal/my-prescription/index"
            },
			// {
			// 	isValidate: 1,
			//     icon: "703ba9785c2d2ab729520bd73299444dea2ee60d05724af5ec468aeda444f17b.png",
			// 	iconSize: 60,
			//     label: "会诊中心",
			// 	path: "/pages-personal/my-consultation-doctor/index"
			// },
            {
				isValidate: 1,
                icon: "88a161e7ab5a49f3ccf70bce29e0716466563f8b794acfa8d4a52a39f0e05079.png",
				iconSize: 60,
                label: "我的评价",
                path: "/pages-personal/my-evaluate/index"
            },
            {
				isValidate: 1,
                icon: "88a161e7ab5a49f3ccf70bce29e0716466563f8b794acfa8d4a52a39f0e05079.png",
				iconSize: 60,
                label: "产品服务",
                path: "/pages-hospital-services/doctor-product/list/index"
            }
        ],
        list: [
			{
				isValidate: 1,
			    icon: "gy_icon_files",
				iconSize: 40,
			    label: "健康档案",
			    path: "/pages-personal/my-health-records/index"
			},
            {
                icon: "gy_icon_addressManagement",
				iconSize: 40,
                label: "收货地址",
                path: "/pages-personal/my-delivery-address/index"
            },
            {
				isValidate: 1,
                icon: "gy_icon_myCollection",
				iconSize: 40,
                label: "我的收藏",
                path: "/pages-personal/my-collect/index"
            },
            {
				isValidate: 1,
                icon: "gy_icon_myInterest",
				iconSize: 40,
                label: "我的关注",
                path: "/pages-personal/my-follow/index"
            },
            {
                icon: "gy_icon_customerService",
				iconSize: 40,
                label: "联系客服",
				phone: uni.getStorageSync("system-hospital").servicePhone
            }
        ]
    });

    function menuSelectFn(item: any){
		if(item.label === "联系客服"){
			page.value?.confirm({
			    title: "联系客服",
			    content: item.phone,
				confirmBtnText: "立即拨打",
				confirm: () => {
					uni.makePhoneCall({
						phoneNumber: item.phone
					});
				}
			})
			return
		}
		if (item.isValidate === 1 && patientList.value.length === 0) {
			page.value?.confirm({
			    title: "未绑定就诊人",
			    content: "您是否现在去绑定就诊人？",
				confirm: () => {
					proxy.utils.uni.route.go('/pages-system/login/index');
				}
			});
			return
		}
		if(item.path){
				proxy.utils.uni.route.go(item.path);
        }else{
			proxy.utils.uni.toast("暂未开通");
        }
    }

	onShow(() => {
		getProductOrderCount().then((res: any) => {
			menu.value.order[0].number = res.waitPayNum;
			menu.value.order[1].number = res.waitSendNum;
			menu.value.order[2].number = res.waitReceiveNum;
			menu.value.order[3].number = res.waitCommentNum;
			// menu.value.order[4].number = res.allNum;
		}).catch(() => {});
		getNurseOrderCount().then((res: any) => {
			menu.value.nursing[0].number = res.waitAffirmNum;
			menu.value.nursing[1].number = res.goingNum;
			menu.value.nursing[2].number = res.completedNum;
			menu.value.nursing[3].number = res.afterSaleNum;
			// menu.value.nursing[4].number = res.allNum;
		}).catch(() => {});
	});
	onPageScroll((payload : any) => {
		const {
			scrollTop
		} = payload;
		if (scrollTop <= 20) {
			navbarBg.value = "rgba(226, 235, 245, 0)";
		} else {
			let rate : number = +navbarBg.value.split(",")[3].split(")")[0];
			if (rate < 1) {
				rate += 0.08;
			}
			navbarBg.value = `rgba(226, 235, 245,${rate})`;
		}
	});
</script>

<style lang="scss" scoped>
	:deep(.gy-navbar){
		.gy-navbar-title{
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx !important;
			padding-left: var(--gy-gap) !important;
			text-align: left !important;
		}
	}
	.user-card{
	    margin: 0 var(--gy-gap);
	    padding-top: var(--gy-gap);
	    @include flex-between-center;
	    .user-avatar{
	        width: 108rpx;
	        height: 108rpx;
	        border: 4rpx solid #ffffff;
	        border-radius: 50%;
	    }
	    .user-info{
	        flex: 1;
	        @include flex-between;
	        flex-direction: column;
	        padding: 0 var(--gy-gap);
	        .user-name{
	            @include text-ellipsis(1);
	            font-size: var(--gy-font-size-large);
				font-weight: bold;
	        }
	        .user-phone{
	            font-size: var(--gy-font-size-medium);
	            color: var(--gy-text-color-secondary);
	        }
	    }
	    .user-setting{
	        width: 108rpx;
	        height: 108rpx;
	        @include flex-end-center;
	    }
	}

	.patient-card{
	    margin: var(--gy-gap);
	    @include flex-between-center;
	    background: linear-gradient(130deg, #00B05B 0%, #31C27C 100%);
	    // box-shadow: 0 3px 10px #31b274;
	    padding: var(--gy-gap);
	    border-radius: var(--gy-border-radius-large);
	    color: #ffffff;
	    font-size: var(--gy-font-size-base);
		.patient-number{
			text{
				font-weight: bold;
			}
		}
		:deep(.gy-button){
			background: #ffffff;
			color: var(--gy-text-color-primary);
			box-shadow: none;
			font-size: var(--gy-font-size-base);
			height: 60rpx !important;
			padding: 0 25rpx !important;
		}
	}
	:deep(.gy-menu-list-item){
		    height: 120rpx !important;
	}
	:deep(.panel-title ){
		margin-bottom: -15px;
		.panel-name::after{
			background: #ffffff !important;
		}
	}
	:deep(.panel-title){
		    border-bottom: none !important;
	}
	:deep(.gy-menu-list-item-name){
		padding-left: 10rpx !important;
	}
</style>
